<template>
    <el-card >
        <h2 slot="header" style="font-weight:blod">{{ $t('system.groupList') }}</h2>
                <el-row :gutter="20"  style="margin-bottom: 8px">
                    <el-col :span="6">
                        <el-input
                            v-model="queryForm.groupName"
                            placeholder="用户组名称"
                            clearable
                            prefix-icon="el-icon-search"
                            @keyup.enter.native="queryGroupList"
                        />
                    </el-col>
                    <el-col :span="2">
                        <el-button @click="queryGroupList">查询</el-button>
                    </el-col>
                    <el-col :span="16">
                        <div class="float-right">
                            <el-button v-premit="'create_group'" @click="popCreateGroup">
                                新增用户组
                            </el-button>
                            <el-dropdown
                                trigger="click"
                                size="medium"
                                @command="handleCommand"
                                style="margin-right:10px"
                            >
                                <el-button>
                                    excel导入到组
                                    <i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="DT">
                                         下载模板
                                    </el-dropdown-item>
                                    <el-dropdown-item command="IM">
                                         导入excel
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <el-upload
                        style="display: none;"
                        ref="upload"
                        :data="extraUploadData"
                        accept=".xlsx,.xls"
                        action="/api/userservice/userGroupRel/import"
                        :on-success="importSuccess"
                        :on-error="importError"
                        :auto-upload="true"
                        :show-file-list="false"
                    >
                        <span slot="trigger" ref="importBtn">{{$t('universityManagement.lead')}}</span>
                    </el-upload>

                        </div>
                    </el-col>
                </el-row>
                        <el-table :data="list" stripe 
                          @selection-change="handleSelectionChange"  
                        >
                            <el-table-column
                                type="selection"
                                width="50">
                            </el-table-column>
                            <el-table-column type="index" label="编号"  />
                            <el-table-column label="用户组名称" width="150">
                                <template slot-scope="scope">
                                    <el-button
                                        :title="scope.row.groupName"
                                        type="text"
                                        @click="showGroupDetail(scope.row.groupId)"
                                    >
                                        {{ scope.row.groupName }}
                                    </el-button>
                                </template>
                            </el-table-column>
                            <el-table-column label="创建人" width="120">
                                <template slot-scope="scope">
                                    {{ scope.row.createBy }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="createDate" label="创建时间" min-width="98">
                                <template slot-scope="scope">
                                    {{ getDateStr(scope.row.createDate) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="内置角色" min-width="98">
                                <template slot-scope="scope">
                                    <span :title="getInnerRoleList(scope.row.innerRoleList)">{{ getInnerRoleList(scope.row.innerRoleList) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="备注">
                                <template slot-scope="scope">
                                    <span :title="scope.row.description">
                                        {{ scope.row.description }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="360">
                                <template slot-scope="scope">
                                    <el-button
                                        v-premit="'add_user_to_group'"
                                        type="text"
                                        @click="showAddUsersToGroupDialog(scope.row.groupId)"
                                    >
                                        添加用户
                                    </el-button>
                                    <el-button
                                        v-premit="'bind_role_to_group'"
                                        type="text"
                                        @click="bindRolesForGroup(scope.row)"
                                    >
                                        绑定角色
                                    </el-button>
                                    <el-button type="text" @click="showRolesUnderGroup(scope.row)">
                                        已绑定角色
                                    </el-button>
                                    <el-button
                                        type="text"
                                        @click="showGroupAuthAndDataBind(scope.row.groupId)"
                                    >
                                        数据分权
                                    </el-button>
                                    <el-button
                                        v-premit="'edit_group'"
                                        type="text"
                                        @click="editGroup(scope.row)"
                                    >
                                        编辑
                                    </el-button>
                                    <el-button
                                        v-premit="'delete_group'"
                                        type="text"
                                        @click="deleteUserGroup(scope.row.groupId)"
                                    >
                                        {{ $t('message.delete') }}
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                <el-row :gutter="0">
                    <el-col>
                        <el-pagination
                            :current-page="queryForm.pageNum_"
                            :page-sizes="[20, 50, 100, 500, 1000]"
                            :page-size="queryForm.pageSize_"
                            :total="queryForm.total"
                            layout="total, sizes, prev, pager, next, jumper"
                            style="float: right;margin:10px 60px 0 0;"
                            @size-change="handleSizeChange"
                            @current-change="handlePageNumChange"
                        />
                    </el-col>
                </el-row>
        <!-- 新增弹出的模态框 -->
        <edu-dialog
            :visible.sync="showDialog"
            title="新增"
            width="600px"
            @close="createUserGroupCancel"
            @confirm="createUserGroupFn"
        >
            <el-form ref="createForm" :model="createForm" :rules="rules" label-width="80px">
                <el-row>
                    <el-form-item label="组名称" prop="groupName">
                        <el-input v-model="createForm.groupName" />
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="创建人">
                        <el-input v-model="createForm.createBy" disabled />
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="内置角色:" prop="innerRoleList">
                        <el-select v-model="createForm.innerRoleList" multiple style="width: 100%">
                            <el-option
                                v-for="item in options.innerRoleList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item filterable label="管理部门:" prop="projIdList">
                        <el-select v-model="createForm.projIdList" multiple style="width: 100%">
                            <el-option
                                v-for="item in options.projIdList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="备注" prop="description">
                        <el-input v-model="createForm.description" type="textarea" />
                    </el-form-item>
                </el-row>
            </el-form>
            <!-- <span slot="footer">
                <el-button @click="createUserGroupCancel">{{$t('message.cancel')}}</el-button>
                <el-button type="primary" @click="createUserGroupFn">{{$t('message.confirm')}}</el-button>
      </span>-->
        </edu-dialog>

        <!-- 编辑弹出的模态框 -->
        <edu-dialog
            :visible.sync="showEditDialog"
            :before-close="editGroupWhenCancel"
            title="修改"
            width="600px"
            @close="editGroupWhenCancel"
            @confirm="editUserGroupFn"
        >
            <el-form ref="editUserGroupForm" :model="editForm" :rules="rules" label-width="80px">
                <el-row>
                    <el-form-item label="组名称" prop="groupName">
                        <el-input v-model="editForm.groupName" />
                    </el-form-item>
                </el-row>
                <el-row :span="12">
                    <el-form-item label="创建人">
                        <el-input v-model="editForm.createBy" readonly />
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="内置角色:" prop="innerRoleList">
                        <el-select
                            v-model="editForm.innerRoleList"
                            multiple
                            collapse-tags
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in options.innerRoleList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="管理部门:" prop="projIdList">
                        <el-select
                            v-model="editForm.projIdList"
                            multiple
                            collapse-tags
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in options.projIdList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="备注">
                            <el-input v-model="editForm.description" type="textarea" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <!-- <span slot="footer">
        <el-button @click="editGroupWhenCancel ">{{$t('message.cancel')}}</el-button>
        <el-button type="primary" @click="editUserGroupFn">{{$t('message.confirm')}}</el-button>
      </span> -->
        </edu-dialog>

        <!-- 组内用户明细 -->
        <edu-dialog
            :show-confirm-btn="false"
            :visible.sync="showDetailDialog"
            title="组内用户明细"
            width="1000px"
            class="systemDialog"
            @close="closeShowDetail"
        >
            <el-row :gutter="20" class="border-bottom" style="height: 56px;">
                <el-col :span="6">
                    <el-input
                        v-model="queryUserForm.userName"
                        placeholder="账号或用户名"
                        clearable
                        suffix-icon="el-icon-query"
                        @keyup.enter.native="queryUsersUnderGroup(true)"
                    />
                </el-col>
                <el-col :span="6">
                    <el-button @click="queryUsersUnderGroup(true)">
                        {{ $t('message.filter') }}
                    </el-button>
                </el-col>
                <el-col :span="12">
                    <div class="float-right">
                        <el-tooltip content="默认全部导出" placement="bottom" effect="light">
                            <el-button @click="exportUsers">导出</el-button>
                        </el-tooltip>
                        <el-button @click="deleteUsersBatch">{{ $t('message.delete') }}</el-button>
                    </div>
                </el-col>
            </el-row>
            <div style="height: calc(100% - 98px);">
                <el-table
                    :data="usersUnderGroup"
                    style="height: 100%;overflow-y: auto;"
                    class="scrollbarSty"
                    stripe
                    @selection-change="handleUsersSelectChange"
                >
                    <el-table-column type="selection" />
                    <el-table-column label="账号">
                        <template slot-scope="scope">
                            {{ scope.row.studentId }}
                        </template>
                    </el-table-column>
                    <el-table-column label="用户名">
                        <template slot-scope="scope">
                            {{ scope.row.name }}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="培养层次"><template slot-scope="scope">{{scope.row.trainingLevel}}</template></el-table-column>
          <el-table-column label="所属部门"><template slot-scope="scope"></template></el-table-column>-->
                    <el-table-column label="联系电话">
                        <template slot-scope="scope">
                            {{ scope.row.phoneNumber }}
                        </template>
                    </el-table-column>
                    <el-table-column label="联系邮箱" min-width="150">
                        <template slot-scope="scope">
                            {{ scope.row.email }}
                        </template>
                    </el-table-column>
                    <el-table-column label="所属学院" min-width="150">
                        <template slot-scope="scope">
                            {{ scope.row.facultyI18n }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                @click="deleteUser(scope.row.studentId, scope.row.userType)"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-row>
                <el-pagination
                    :current-page="queryUserForm.pageNum_"
                    :page-sizes="[20, 50, 100, 500, 1000]"
                    :page-size="queryUserForm.pageSize_"
                    :total="queryUserForm.total"
                    layout="total, prev, pager, next"
                    style="float: right;margin:10px 60px 0 0;"
                    @size-change="handleSizeChange1"
                    @current-change="handlePageNumChange1"
                />
            </el-row>
        </edu-dialog>

        <!-- 绑定角色 -->
        <el-dialog
            v-drag-dialog
            :visible.sync="showRolesDialog"
            title="绑定角色"
            width="1000px"
            class="systemDialog scrollbarSty"
            @close="closeBindingRole"
        >
            <el-row :gutter="20" class="border-bottom" style="height:56px;">
                <el-col :span="8">
                    <el-input
                        v-model="queryRoleForm.roleName"
                        placeholder="角色名称"
                        clearable
                        suffix-icon="el-icon-query"
                        @keyup.enter.native="queryRoles(true)"
                    />
                </el-col>
                <el-col :span="2">
                    <el-button @click="queryRoles(true)">查询</el-button>
                </el-col>
                <el-col :span="14">
                    <div class="float-right">
                        <el-button @click="addRolesToGroup">绑定</el-button>
                    </div>
                </el-col>
            </el-row>
            <div style="height: calc(100% - 98px);overflow: auto">
                <el-table
                    :data="roles"
                    style="height: 100%;overflow-y: auto;"
                    tooltip-effect="light"
                    stripe
                    @selection-change="handlePickRolesChange"
                >
                    <el-table-column type="selection" />
                    <el-table-column show-overflow-tooltip label="角色名称">
                        <template slot-scope="scope">
                            {{ scope.row.roleName }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="创建人">
                        <template slot-scope="scope">
                            {{ scope.row.createBy }}
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间">
                        <template slot-scope="scope">
                            {{ getDateStr(scope.row.createDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="备注">
                        <template slot-scope="scope">
                            {{ scope.row.description }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-row>
                <el-col>
                    <el-pagination
                        :current-page="queryRoleForm.pageNum_"
                        :page-sizes="[20, 50, 100, 500, 1000]"
                        :page-size="queryRoleForm.pageSize_"
                        :total="queryRoleForm.total"
                        layout="total, prev, pager, next"
                        style="float: right;margin:10px 60px 0 0;"
                        @size-change="handleSizeChange2"
                        @current-change="handlePageNumChange2"
                    />
                </el-col>
            </el-row>
        </el-dialog>

        <!-- 已绑定角色 -->
        <el-dialog
            v-drag-dialog
            :visible.sync="showBindRolesDialog"
            title="已绑定角色"
            width="1000px"
            class="systemDialog scrollbarSty"
            @close="closeRoleBound"
        >
            <el-row :gutter="20" class="border-bottom" style="height:56px;">
                <el-col :span="8">
                    <el-input
                        v-model="queryBindRoleForm.roleName"
                        placeholder="角色名称"
                        clearable
                        suffix-icon="el-icon-query"
                        @keyup.enter.native="queryRolesUnderGroup(true)"
                    />
                </el-col>
                <el-col :span="2">
                    <el-button @click="queryRolesUnderGroup(true)">查询</el-button>
                </el-col>
                <el-col :span="14">
                    <div class="float-right">
                        <!-- <el-button @click="addRolesToGroup">绑定</el-button> -->
                    </div>
                </el-col>
            </el-row>
            <div style="height: calc(100% - 98px);overflow: auto">
                <el-table
                    :data="rolesUnderGroup"
                    style="height: 100%;overflow-y: auto;"
                    tooltip-effect="light"
                    stripe
                    @selection-change="handlePickRolesChange"
                >
                    <el-table-column type="selection" />
                    <el-table-column show-overflow-tooltip label="角色名称">
                        <template slot-scope="scope">
                            <span>{{ scope.row.roleName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="创建人">
                        <template slot-scope="scope">
                            {{ scope.row.createBy }}
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间">
                        <template slot-scope="scope">
                            {{ getDateStr(scope.row.createDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="备注">
                        <template slot-scope="scope">
                            {{ scope.row.description }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="80">
                        <template slot-scope="scope">
                            <el-button type="text" @click="deleteRoleFromGroup(scope.row.roleId)">
                                解绑
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-row>
                <el-col>
                    <el-pagination
                        :current-page="queryBindRoleForm.pageNum_"
                        :page-sizes="[20, 50, 100, 500, 1000]"
                        :page-size="queryBindRoleForm.pageSize_"
                        :total="queryBindRoleForm.total"
                        layout="total, prev, pager, next"
                        style="float: right;margin:10px 60px 0 0;"
                        @size-change="handleSizeChange6"
                        @current-change="handlePageNumChange6"
                    />
                </el-col>
            </el-row>
        </el-dialog>

        <!--添加用户-->
        <edu-dialog
            :is-custom-title="true"
            :auto-height="false"
            :show-confirm-btn="false"
            :visible.sync="showUnbindUsersDialog"
            title="添加用户到组"
            width="1200px"
            class="systemDialog"
            @close="closeAddUser"
        >
            <div slot="title" class="dialog-title">
                <span
                    v-for="item in tabs"
                    :key="item.key"
                    :class="{ active: activeTab == item.key }"
                    class="toggle"
                    style="font-size:18px;"
                    @click="activeTab = item.key"
                >
                    {{ item.label }}
                </span>
            </div>
            <div v-if="activeTab == 'student'" ref="studentBox">
                <ConditionCard
                    body-style="padding: 0"
                    class="groupList-addUser"
                    @search="queryUnbindStudents(true)"
                    @reset="resetUnbindStudents"
                >
                    <el-form
                        ref="queryUnbindUserForm"
                        :model="queryUnbindUserForm"
                        label-width="80px"
                    >
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="培养层次 : ">
                                    <el-select
                                        v-model="queryUnbindUserForm.trainingLevel"
                                        style="width: 100%"
                                    >
                                        <el-option
                                            v-for="item in options.trainingLevel"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="年级 : ">
                                    <el-select
                                        v-model="queryUnbindUserForm.grade"
                                        style="width: 100%"
                                        @change="changeFaculty"
                                    >
                                        <el-option
                                            v-for="item in options.grade"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="学院 : ">
                                    <el-select
                                        v-model="queryUnbindUserForm.faculty"
                                        style="width: 100%"
                                        @change="changeFaculty"
                                    >
                                        <el-option
                                            v-for="item in options.faculty"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="学位类型 : ">
                                    <el-select
                                        v-model="queryUnbindUserForm.degreeType"
                                        style="width: 100%"
                                        @change="changeFaculty"
                                    >
                                        <el-option
                                            v-for="item in options.degreeType"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="专业 : ">
                                    <el-select
                                        v-model="queryUnbindUserForm.profession"
                                        style="width: 100%"
                                    >
                                        <el-option
                                            v-for="item in options.profession"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col span="8" :offset="12">
                                <el-button
                                    @click="queryUnbindStudents"
                                    type="primary"
                                    class="float-right"
                                >{{$t('common.btn.filter')}}</el-button>
              </el-col>-->
                        </el-row>
                    </el-form>
                </ConditionCard>

                <el-row :gutter="20" style="height:50px; margin-top:20px;" class="border-bottom">
                    <el-col :span="6">
                        <el-input
                            v-model="queryUnbindUserForm.name"
                            placeholder="账号或用户名称"
                            prefix-icon="el-icon-search"
                            @keyup.enter.native="queryUnbindStudents(true)"
                        />
                    </el-col>
                    <el-col :span="2">
                        <el-button @click="queryUnbindStudents(true)">查询</el-button>
                    </el-col>
                    <el-col :span="16">
                        <div class="float-right">
                            <el-button @click="addUnbindedStudentsToGroup">添加到组</el-button>
                        </div>
                    </el-col>
                </el-row>
                <el-table
                    :data="unbindUsers"
                    tooltip-effect="light"
                    stripe
                    @selection-change="handlePickUnbindStudentsChange"
                >
                    <el-table-column type="selection" />
                    <el-table-column show-overflow-tooltip prop="studentId" label="账号" />
                    <el-table-column show-overflow-tooltip prop="name" label="用户名" />
                    <el-table-column label="培养层次">
                        <template slot-scope="scope">
                            {{ scope.row.trainingLevelI18n }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="所属部门">
                        <template slot-scope="scope">
                            {{ scope.row.facultyI18n }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="联系电话">
                        <template slot-scope="scope">
                            {{ scope.row.phoneNumber }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="联系邮箱">
                        <template slot-scope="scope">
                            {{ scope.row.email }}
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col>
                        <el-pagination
                            :current-page="queryUnbindUserForm.pageNum_"
                            :page-sizes="[20, 50, 100, 500, 1000]"
                            :page-size="queryUnbindUserForm.pageSize_"
                            :total="queryUnbindUserForm.total"
                            layout="total, prev, pager, next, jumper"
                            style="float: right;margin:10px 20px 0 0;"
                            @size-change="handleSizeChange3"
                            @current-change="handlePageNumChange3"
                        />
                    </el-col>
                </el-row>
            </div>

            <div v-if="activeTab == 'teacher'" ref="teacherBox">
                <el-row :gutter="20" style="height:56px;" class="border-bottom">
                    <el-col :span="8">
                        <el-input
                            v-model="queryUnbindTeacherForm.condition"
                            placeholder="账号或用户名称"
                            prefix-icon="el-icon-search"
                            @keyup.enter.native="queryUnbindTeachers(true)"
                        />
                    </el-col>
                    <el-col :span="2">
                        <el-button @click="queryUnbindTeachers(true)">
                            {{ $t('message.filter') }}
                        </el-button>
                    </el-col>
                    <el-col :span="14">
                        <div class="float-right">
                            <el-button @click="addUnbindedTeachersToGroup">添加到组</el-button>
                        </div>
                    </el-col>
                </el-row>
                <el-table
                    :data="unbindTeachers"
                    stripe
                    tooltip-effect="light"
                    @selection-change="handlePickUnbindTeacherChange"
                >
                    <el-table-column type="selection" />
                    <el-table-column show-overflow-tooltip prop="code" label="账号" />
                    <el-table-column show-overflow-tooltip prop="name" label="用户名" />
                    <el-table-column show-overflow-tooltip label="学院">
                        <template slot-scope="scope">
                            {{ scope.row.facultyI18n }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="专业">
                        <template slot-scope="scope">
                            {{ scope.row.profession }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="职称">
                        <template slot-scope="scope">
                            {{ scope.row.title }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="教师资格">
                        <template slot-scope="scope">
                            {{ scope.row.qualificationI18n }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="联系电话">
                        <template slot-scope="scope">
                            {{ scope.row.telephone }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="联系邮箱">
                        <template slot-scope="scope">
                            {{ scope.row.email }}
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col>
                        <el-pagination
                            :current-page="queryUnbindTeacherForm.pageNum_"
                            :page-sizes="[20, 50, 100, 500, 1000]"
                            :page-size="queryUnbindTeacherForm.pageSize_"
                            :total="queryUnbindTeacherForm.total"
                            layout="total, prev, pager, next, jumper"
                            style="float: right;margin:10px 20px 0 0;"
                            @size-change="handleSizeChange4"
                            @current-change="handlePageNumChange4"
                        />
                    </el-col>
                </el-row>
            </div>

            <div v-if="activeTab == 'localUser'" ref="localUserBox">
                <el-row :gutter="20" style="height:56px;" class="border-bottom">
                    <el-col :span="8">
                        <el-input
                            v-model="queryUnbindLocalUserForm.condition"
                            placeholder="账号或用户名称"
                            prefix-icon="el-icon-search"
                            @keyup.enter.native="queryUnbindLocalUsers(true)"
                        />
                    </el-col>
                    <el-col :span="2">
                        <el-button @click="queryUnbindLocalUsers(true)">
                            {{ $t('message.filter') }}
                        </el-button>
                    </el-col>
                    <el-col :span="14">
                        <div class="float-right">
                            <el-button @click="addUnbindedLocalUsersToGroup">添加到组</el-button>
                        </div>
                    </el-col>
                </el-row>
                <el-table
                    :data="unbindLocalUsers"
                    stripe
                    tooltip-effect="light"
                    @selection-change="handlePickUnbindLocalUsersChange"
                >
                    <el-table-column type="selection" />
                    <el-table-column show-overflow-tooltip prop="userId" label="账号" />
                    <el-table-column show-overflow-tooltip prop="userName" label="用户名" />
                    <el-table-column show-overflow-tooltip label="所属部门">
                        <template slot-scope="scope">
                            {{ scope.row.deptName }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="联系电话">
                        <template slot-scope="scope">
                            {{ scope.row.mobilePhone }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="联系邮箱">
                        <template slot-scope="scope">
                            {{ scope.row.email }}
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col>
                        <el-pagination
                            :current-page="queryUnbindLocalUserForm.pageNum_"
                            :page-sizes="[20, 50, 100, 500, 1000]"
                            :page-size="queryUnbindLocalUserForm.pageSize_"
                            :total="queryUnbindLocalUserForm.total"
                            layout="total, prev, pager, next, jumper"
                            style="float: right;margin:10px 20px 0 0;"
                            @size-change="handleSizeChange5"
                            @current-change="handlePageNumChange5"
                        />
                    </el-col>
                </el-row>
            </div>
        </edu-dialog>

        <!-- 数据分权 -->
        <edu-dialog
            v-drag-dialog
            :visible.sync="showGroupAuthAndDataBindDialog"
            title="数据分权"
            width="1000px"
            @close="showGroupAuthAndDataBindDialog = false"
            @confirm="saveGroupAuthAndDataRel"
        >
            <el-form ref="deptCateGoryRelForm" :model="deptCateGoryRelForm" label-width="80px">
                <el-row :gutter="40">
                    <el-col :span="12">
                        <el-form-item label="部门">
                            <!-- <section class="tree-box">
                                <p>所有部门</p>
                                <div>
                                    <el-tree
                                        style="border:1px soild red;"
                                        ref="allDeptsTree"
                                        :data="alldepts"
                                        :props="defaultProps"
                                        show-checkbox
                                        default-expand-all
                                        node-key="value"
                                        @check-change="handleDeptTree"
                                    ></el-tree>
                                </div>
              </section>-->
                            <!-- geolcn -->
                            <edu-transfer
                                ref="allDeptsTree"
                                :left-checked="true"
                                :right-edu-transfer="false"
                                :selected-by-search="true"
                                :left-transfer-data="leftTransferData"
                                left-title="所有部门"
                                v-on="{ checkChange: handleDeptTree }"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-row>
                            <el-form-item label="培养层次">
                                <el-select
                                    v-model="deptCateGoryRelForm.trainingLevel"
                                    multiple
                                    style="width:100%"
                                    collapse-tags
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in options.trainingLevel"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="年级">
                                <el-select
                                    v-model="deptCateGoryRelForm.grade"
                                    multiple
                                    style="width:100%"
                                    collapse-tags
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in options.grade"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="学习形式">
                                <el-select
                                    v-model="deptCateGoryRelForm.formLearning"
                                    multiple
                                    style="width:100%"
                                    collapse-tags
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in options.formLearning"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="国际学生">
                                <el-select
                                    v-model="deptCateGoryRelForm.studentAbroad"
                                    style="width:100%"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in options.studentAbroad"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer">
                <!-- <el-button @click="showGroupAuthAndDataBindDialog = false">{{$t('message.cancel')}}</el-button>
        <el-button type="primary" @click="saveGroupAuthAndDataRel">{{$t('message.confirm')}}</el-button>-->
            </span>
        </edu-dialog>
    </el-card>
</template>
<script>
import {
    getGroups,
    createUserGroup,
    getUnbindRoles,
    batchAddRoleGroupRel,
    getUserInfoListByGroupId,
    batchDelUserGroupRel,
    deleteGroup,
    getUserInfoListNotInGroupId,
    updateGroup,
    batchAddUserGroupRel,
    findLocalUserListNotInGroupId,
    findTeacherInfoListNotInGroupId,
    getRoleRelListByGroupId,
    batchDelRoleGroupRel,
    findDept,
    createOrDelOrUpdateGroupData,
    findUserGroupDataByUserGroupId,
    downLoadTemplate
} from 'common/src/api/user'
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import EduTransfer from 'common/src/components/common/EduTransfer'
export default {
    name: 'GroupList',
    components: { EduTransfer },
    data() {
        let validateName = (rule, value, callback) => {
            let regex = /^[\w\d\s\S\u4e00-\u9fa5]{4,100}$/
            if (regex.test(value)) {
                callback()
            } else {
                callback(
                    new Error(
                        UTILS.i18nReplace(this.$t('system.errorTipInfo'), {
                            minLength: 4,
                            maxLength: 100
                        })
                    )
                )
            }
        }
        let validateDesc = (rule, value, callback) => {
            let regex = /^.{0,120}$/
            if (regex.test(value)) {
                callback()
            } else {
                callback(new Error('备注信息不能超过120个字符.'))
            }
        }
        let getGrade = (function() {
            let now = new Date().getFullYear()
            let years = []
            for (let i = 0; i < 6; i++) {
                years.push({
                    label: now - i + '',
                    value: now - i + ''
                })
            }
            return years
        })()
        return {
            isEdit: false,
            showDialog: false,
            showEditDialog: false,
            showDetailDialog: false,
            showRolesDialog: false,
            showUnbindUsersDialog: false,
            showGroupAuthAndDataBindDialog: false,
            currentGroupId: '',
            queryForm: {
                groupName: '',
                pageNum_: 1,
                total: 0,
                pageSize_: 20
            },
            createForm: {
                groupName: '',
                description: '',
                projIdList: [], //管理部门支持多选
                innerRoleList: [] //内置角色支持多选
            },
            editForm: {},
            list: [],
            queryUserForm: {
                userName: '',
                pageNum_: 1,
                total: 0,
                pageSize_: 20,
                groupId: ''
            },
            queryUnbindUserForm: {
                name: '',
                pageNum_: 1,
                total: 0,
                pageSize_: 20,
                groupId: '',
                trainingLevel: '',
                grade: '',
                faculty: '',
                degreeType: '',
                profession: ''
            },
            queryUnbindLocalUserForm: {
                condition: '',
                pageNum_: 1,
                total: 0,
                pageSize_: 20,
                groupId: ''
            },
            queryUnbindTeacherForm: {
                condition: '',
                pageNum_: 1,
                total: 0,
                pageSize_: 20,
                groupId: ''
            },
            queryRoleForm: {
                userGroupId: '',
                roleName: '',
                pageNum_: 1,
                total: 0,
                pageSize_: 20
            },
            queryBindRoleForm: {
                groupId: '',
                roleName: '',
                pageNum_: 1,
                total: 0,
                pageSize_: 20
            },
            deptCateGoryRelForm: {
                trainingLevel: [],
                grade: [],
                formLearning: [],
                studentAbroad: '',
                depts: []
            },
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            alldepts: [],
            leftTransferData: '',
            roles: [],
            rolesUnderGroup: [],
            pickRoles: [],
            usersUnderGroup: [],
            pickedUsersUnderGroup: [],
            users: [],
            unbindUsers: [],
            pickedStudentsUnbindGroup: [],
            unbindLocalUsers: [],

            tabs: [
                { label: '学生', key: 'student' },
                { label: '教师', key: 'teacher' },
                { label: '本地用户', key: 'localUser' }
            ],
            activeTab: '',
            pickedTeachersUnbindGroup: [],
            unbindTeachers: [],
            showBindRolesDialog: false,
            rules: {
                groupName: [{ required: true, validator: validateName, trigger: 'blur' }],
                description: [
                    {
                        validator: validateDesc,
                        trigger: 'blur'
                    }
                ],
                innerRoleList: [
                    {
                        required: true,
                        message: '至少选择一个内置角色',
                        trigger: 'change'
                    }
                ],
                projIdList: [
                    {
                        required: true,
                        message: '至少选择一个管理部门',
                        trigger: 'change'
                    }
                ]
            },
            options: {
                projIdList: [], //管理部门支持多选
                innerRoleList: [], //内置角色支持多选
                trainingLevel: [],
                grade: getGrade,
                formLearning: [],
                studentAbroad: [
                    { label: '...', value: '2' },
                    { label: '是', value: '0' },
                    { label: '否', value: '1' }
                ],
                faculty: [],
                degreeType: [],
                profession: []
            },
            categories: {
                depts: 1,
                grade: 2,
                trainingLevel: 3,
                formLearning: 4,
                studentAbroad: 6
            },
            pickedLocalUsersUnbindGroup: [],
            multipleSelection:[],
            extraUploadData:{
                groupId:''
            }
        }
    },
    computed: {
        index: _ => index
    },
    watch: {
        activeTab(val) {
            if (val) {
                this.submitQueryUsersForm()
            }
        },
        showGroupAuthAndDataBindDialog(val, oldVal) {
            if (!val) {
                this.$refs.allDeptsTree.$refs.leftTree.setCheckedKeys([])
                for (let key in this.deptCateGoryRelForm) {
                    if (this.deptCateGoryRelForm[key] instanceof Array) {
                        this.deptCateGoryRelForm[key] = []
                    } else {
                        this.deptCateGoryRelForm[key] = ''
                    }
                }
            }
        }
    },
    created() {},
    mounted() {
        this.onSubmit() //获取本页数据
        this.initOptions() //获取数据字典
    },
    methods: {
        async getGroups(queryForm) {
            try {
                let resp = await getGroups(queryForm)
                if (resp && resp.data) {
                    this.list = resp.data.list || []
                    this.queryForm.total = resp.data.total_ || 0
                } else {
                    this.setDataFormatErrMsg()
                }
            } catch (error) {
                console.log(error)
            }
        },
        async createUserGroup(queryForm) {
            try {
                let resp = await createUserGroup(queryForm)
                if (resp && resp.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    })
                    this.showDialog = false
                    this.queryGroupList()
                    this.$refs.createForm.resetFields()
                } else if (resp.code == 300) {
                    this.$message({
                        type: 'error',
                        message: '用户组已存在!'
                    })
                } else {
                    this.setDataFormatErrMsg(`${resp.code} ${resp.message}`)
                }
            } catch (error) {
                console.log(error)
            }
        },
        async getUnbindRoles(queryForm) {
            try {
                let resp = await getUnbindRoles(queryForm)
                if (resp && resp.data) {
                    this.roles = resp.data.list || []
                    this.queryRoleForm.total = resp.data.total_ || 0
                } else {
                    this.setDataFormatErrMsg()
                }
            } catch (error) {
                console.log(error)
            }
        },
        async batchAddRoleGroupRel(queryForm) {
            try {
                let resp = await batchAddRoleGroupRel(queryForm)
                if (resp && resp.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    })
                    this.showRolesDialog = false
                    this.currentGroupId = ''
                    this.pickRoles = []
                } else {
                    this.$message({
                        type: 'error',
                        message: '添加失败，请重试'
                    })
                }
            } catch (error) {
                console.log(error)
            }
        },
        async getUserInfoListByGroupId(queryForm) {
            try {
                let resp = await getUserInfoListByGroupId(queryForm)
                if (resp && resp.data && resp.code == 200) {
                    this.usersUnderGroup = resp.data.list || []
                    this.queryUserForm.total = resp.data.total_ || 0
                } else {
                    this.$message({
                        type: 'error',
                        message: '查询出错, 请重试'
                    })
                }
            } catch (error) {
                console.log(error)
            }
        },
        async batchDelUserGroupRel(queryForm) {
            try {
                let resp = await batchDelUserGroupRel(queryForm)
                if (resp && resp.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功.'
                    })
                    this.pickedUsersUnderGroup = []
                    this.queryUsersUnderGroup(true)
                } else {
                    this.$message({
                        type: 'error',
                        message: '操作失败.'
                    })
                }
            } catch (error) {
                console.log(error)
            }
        },
        async deleteGroup(queryForm) {
            try {
                let resp = await deleteGroup(queryForm)
                if (resp && resp.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    this.queryGroupList()
                } else if (resp && resp.code == 300) {
                    this.$message({
                        type: 'warning',
                        message: '该用户组已关联用户, 不能删除.'
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '操作失败'
                    })
                }
            } catch (error) {
                console.log(error)
            }
        },
        async getUserInfoListNotInGroupId(queryForm) {
            try {
                let resp = await getUserInfoListNotInGroupId(queryForm)
                if (resp && resp.data && resp.code == 200) {
                    this.unbindUsers = resp.data.list || []
                    this.queryUnbindUserForm.total = resp.data.total_ || 0
                } else {
                    this.setDataFormatErrMsg()
                }
            } catch (error) {
                console.log(error)
            }
        },
        async updateGroup(queryForm) {
            try {
                let resp = await updateGroup(queryForm)
                if (resp && resp.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '修改成功'
                    })
                    this.showEditDialog = false
                    this.editForm = {}
                    this.onSubmit()
                    this.$refs.editUserGroupForm.resetFields()
                } else {
                    this.$message({
                        type: 'error',
                        message: '操作失败, 请重试.'
                    })
                }
            } catch (error) {
                console.log(error)
            }
        },
        async batchAddUserGroupRel(queryForm) {
            try {
                let resp = await batchAddUserGroupRel(queryForm)
                if (resp && resp.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    })
                    this.showUnbindUsersDialog = false
                    this.pickedLocalUsersUnbindGroup = []
                } else {
                    this.setDataFormatErrMsg()
                }
            } catch (error) {
                console.log(error)
            }
        },
        async findLocalUserListNotInGroupId(queryForm) {
            try {
                let resp = await findLocalUserListNotInGroupId(queryForm)
                if (resp && resp.data && resp.code == 200) {
                    this.unbindLocalUsers = resp.data.list || []
                    this.queryUnbindLocalUserForm.total = resp.data.total_ || 0
                } else {
                    this.$message({
                        type: 'error',
                        message: '查询出错, 请重试.'
                    })
                }
            } catch (error) {
                console.log(error)
            }
        },
        async findTeacherInfoListNotInGroupId(queryForm) {
            try {
                let resp = await findTeacherInfoListNotInGroupId(queryForm)
                if (resp && resp.data && resp.code == 200) {
                    this.unbindTeachers = resp.data.list || []
                    this.queryUnbindTeacherForm.total = resp.data.total_ || 0
                } else {
                    this.setDataFormatErrMsg()
                }
            } catch (error) {
                console.log(error)
            }
        },
        async getRoleRelListByGroupId(queryForm) {
            try {
                let resp = await getRoleRelListByGroupId(queryForm)
                if (resp && resp.data && resp.code == 200) {
                    this.rolesUnderGroup = resp.data.list || []
                    this.queryBindRoleForm.total = resp.data.total_ || 0
                } else {
                    this.setDataFormatErrMsg()
                }
            } catch (error) {
                console.log(error)
            }
        },
        async batchDelRoleGroupRel(queryForm) {
            try {
                let resp = await batchDelRoleGroupRel(queryForm)
                if (resp && resp.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '操作成功.'
                    })
                    this.queryRolesUnderGroup()
                } else {
                    this.setDataFormatErrMsg()
                }
            } catch (error) {
                console.log(error)
            }
        },
        async findDept(queryForm) {
            try {
                let resp = await findDept(queryForm)
                if (resp && resp.data && resp.code == 200) {
                    let list = this.switchData(resp.data)
                    this.leftTransferData = JSON.stringify(resp.data)
                    this.queryDeptsCategoriesRel()
                } else {
                    this.setDataFormatErrMsg()
                }
            } catch (error) {
                console.log(error)
            }
        },
        async createOrDelOrUpdateGroupData(queryForm) {
            try {
                let resp = await createOrDelOrUpdateGroupData(queryForm)
                if (resp && resp.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    })
                } else {
                    this.setDataFormatErrMsg()
                }
                this.showGroupAuthAndDataBindDialog = false
            } catch (error) {
                console.log(error)
            }
        },
        async findUserGroupDataByUserGroupId(queryForm) {
            try {
                let resp = await findUserGroupDataByUserGroupId(queryForm)
                if (resp && resp.data && resp.code == 200) {
                    let items = resp.data
                    items.forEach(item => {
                        let i = this.findKey(item.type)
                        if (!i) {
                            return
                        }
                        if (item.value.indexOf(',') >= 0) {
                            this.deptCateGoryRelForm[i] = item.value.split(',')
                        } else if (item.type != '6') {
                            if (item.value == '') {
                                this.deptCateGoryRelForm[i] = []
                            } else {
                                this.deptCateGoryRelForm[i] = [item.value]
                            }
                        } else {
                            this.deptCateGoryRelForm[i] = item.value
                        }
                    })
                    this.displayDeptsPicked()
                }
            } catch (error) {
                console.log(error)
            }
        },
        setDataFormatErrMsg(msg) {
            msg = msg ? msg : 'The data returned is malformed'
            this.$message({
                type: 'error',
                message: msg
            })
        },
        changeFaculty(val) {
            this.options['profession'] = []
            let { degreeType, grade, faculty } = this.queryUnbindUserForm
            let params = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['G_ZY'],
                filter: {
                    prefix: [val],
                    specilaCode: 'XY2ZY',
                    facultys: faculty ? [faculty] : [],
                    grade: grade,
                    degreeType: degreeType ? [degreeType] : []
                }
            }
            queryDic(params)
                .then(res => {
                    if (res.code == 200) {
                        this._fill('profession', res.data.G_ZY)
                    }
                })
                .catch(error => {
                    console.log(error)
                })
        },
        initOptions() {
            let params = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['X_PYCC', 'X_YX', 'X_XXXS', 'X_GLBM', 'X_NZYHJS', 'X_XWLX']
            }
            queryDic(params)
                .then(res => {
                    if (res.code == 200) {
                        this.fillSelect(res.data)
                        this.onSubmit()
                    }
                })
                .catch(error => {
                    console.log(error)
                    this.onSubmit()
                })
        },
        fillSelect(data) {
            this._fill('innerRoleList', data.X_NZYHJS)
            this._fill('projIdList', data.X_GLBM)
            this._fill('trainingLevel', data.X_PYCC)
            this._fill('faculty', data.X_YX)
            this._fill('formLearning', data.X_XXXS)
            this._fill('degreeType', data.X_XWLX)
        },
        _fill(type, data) {
            for (let key in data) {
                this.options[type].push({
                    value: key,
                    label: data[key]
                })
            }
        },
        queryDeptsCategoriesRel() {
            let query = { groupId: this.currentGroupId }
            this.findUserGroupDataByUserGroupId(query)
        },
        displayDeptsPicked() {
            let depts = this.deptCateGoryRelForm.depts
            let nodes = JSON.parse(this.leftTransferData).filter(item => {
                return depts.indexOf(item.deptId.toString()) > -1
            })
            // geolcn 给edutransfer赋值，传入选中的节点
            console.log(depts, 'depts')
            this.$refs.allDeptsTree.$refs.leftTree.setCheckedKeys(depts)
            if (depts instanceof Array && depts.length > 0) {
                this.$refs.allDeptsTree.leftCheckChange()
            }
        },
        findKey(type) {
            for (let key in this.categories) {
                if (this.categories[key] == type) {
                    return key
                }
            }
        },
        saveGroupAuthAndDataRel() {
            let data = []
            for (let key in this.deptCateGoryRelForm) {
                let obj = {}
                if (this.deptCateGoryRelForm[key] instanceof Array) {
                    obj.value = this.deptCateGoryRelForm[key].join(',')
                } else {
                    obj.value = this.deptCateGoryRelForm[key]
                }
                obj.type = this.categories[key]
                obj.groupId = this.currentGroupId
                data.push(obj)
            }
            this.createOrDelOrUpdateGroupData(data)
        },
        getDeptIdFromNode(pValue, originList) {
            let cur = pValue
            let depts = []
            while (cur > 0) {
                originList.forEach((item, index) => {
                    if (item.value == cur) {
                        depts.push(item.value)
                        cur = item.pValue
                    }
                })
            }
            return depts
        },
        handleDeptTree(val) {
            this.deptCateGoryRelForm.depts = val
        },
        initDept() {
            this.findDept('1')
        },
        switchData(list) {
            return list.map((item, index) => {
                return {
                    value: item.deptId,
                    label: item.deptName,
                    pValue: item.parentDeptId
                }
            })
        },
        _fill(type, data) {
            this.options[type].length = 0
            for (let key in data) {
                this.options[type].push({
                    value: key,
                    label: data[key]
                })
            }
        },

        async showGroupAuthAndDataBind(groupId) {
            this.showGroupAuthAndDataBindDialog = true
            this.currentGroupId = groupId
            // await this.initOptions()
            await this.initDept()
        },
        popCreateGroup() {
            this.showDialog = true
            this.createForm.createBy = this.$store.state.session.user.name
        },
        handlePageNumChange(val) {
            this.queryForm.pageNum_ = val
            this.onSubmit()
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val
            this.onSubmit()
        },
        handlePageNumChange1(val) {
            this.queryUserForm.pageNum_ = val
            this.queryUsersUnderGroup()
        },
        handleSizeChange1(val) {
            this.queryUserForm.pageSize_ = val
            this.queryUsersUnderGroup()
        },
        handlePageNumChange2(val) {
            this.queryRoleForm.pageNum_ = val
            this.queryRoles()
        },
        handleSizeChange2(val) {
            this.queryRoleForm.pageSize_ = val
            this.queryRoles()
        },
        handlePageNumChange3(val) {
            this.queryUnbindUserForm.pageNum_ = val
            this.queryUnbindStudents()
        },
        handleSizeChange3(val) {
            this.queryUnbindUserForm.pageSize_ = val
            this.queryUnbindStudents()
        },
        handlePageNumChange4(val) {
            this.queryUnbindTeacherForm.pageNum_ = val
            this.queryUnbindTeachers()
        },
        handleSizeChange4(val) {
            this.queryUnbindTeacherForm.pageSize_ = val
            this.queryUnbindTeachers()
        },
        handlePageNumChange5(val) {
            this.queryUnbindLocalUserForm.pageNum_ = val
            this.queryUnbindLocalUsers()
        },
        handleSizeChange5(val) {
            this.queryUnbindLocalUserForm.pageSize_ = val
            this.queryUnbindLocalUsers()
        },

        handlePageNumChange6(val) {
            this.queryBindRoleForm.pageNum_ = val
            this.queryRolesUnderGroup()
        },
        handleSizeChange6(val) {
            this.queryBindRoleForm.pageSize_ = val
            this.queryRolesUnderGroup()
        },
        submitQueryUsersForm() {
            if (this.activeTab == 'student') {
                this.queryUnbindStudents()
            } else if (this.activeTab == 'teacher') {
                this.queryUnbindTeachers()
            } else {
                this.queryUnbindLocalUsers()
            }
        },
        queryUnbindTeachers(reset) {
            if (reset) {
                this.queryUnbindTeacherForm.pageNum_ = 1
                this.queryUnbindTeacherForm.total = 1
            }
            this.queryUnbindTeacherForm.groupId = this.currentGroupId
            this.findTeacherInfoListNotInGroupId(this.queryUnbindTeacherForm)
        },
        queryUnbindLocalUsers(reset) {
            if (!this.currentGroupId) {
                return
            }
            if (reset) {
                this.queryUnbindLocalUserForm.pageNum_ = 1
                this.queryUnbindLocalUserForm.total = 0
            }
            this.queryUnbindLocalUserForm.groupId = this.currentGroupId
            this.findLocalUserListNotInGroupId(this.queryUnbindLocalUserForm)
        },
        addUnbindedLocalUsersToGroup() {
            if (this.pickedLocalUsersUnbindGroup.length == 0) {
                this.$message({
                    type: 'warning',
                    message: '请至少选择一个用户.'
                })
                return
            }
            let data = {
                groupIdList: [this.currentGroupId],
                userType: 3,
                userList: this.pickedLocalUsersUnbindGroup.map((item, index) => {
                    return { userId: item.userId, userName: item.userName }
                })
            }
            this.batchAddUserGroupRelFn(data)
        },
        batchAddUserGroupRelFn(data) {
            this.batchAddUserGroupRel(data)
        },
        handlePickUnbindLocalUsersChange(val) {
            this.pickedLocalUsersUnbindGroup = val
        },
        handlePickUnbindStudentsChange(val) {
            this.pickedStudentsUnbindGroup = val
        },
        handlePickUnbindTeacherChange(val) {
            this.pickedTeachersUnbindGroup = val
        },
        addUnbindedStudentsToGroup() {
            if (this.pickedStudentsUnbindGroup.length == 0) {
                this.$message({
                    type: 'warning',
                    message: '请至少选择一个用户.'
                })
                return
            }
            let data = {
                groupIdList: [this.currentGroupId],
                userType: 2,
                userList: this.pickedStudentsUnbindGroup.map((item, index) => {
                    return { userId: item.studentId, userName: item.name }
                })
            }
            this.batchAddUserGroupRelFn(data)
        },

        addUnbindedTeachersToGroup() {
            if (this.pickedTeachersUnbindGroup.length == 0) {
                this.$message({
                    type: 'warning',
                    message: '请至少选择一个用户.'
                })
                return
            }
            let data = {
                groupIdList: [this.currentGroupId],
                userType: 1,
                userList: this.pickedTeachersUnbindGroup.map((item, index) => {
                    return { userId: item.code, userName: item.name }
                })
            }
            this.batchAddUserGroupRelFn(data)
        },

        queryUnbindStudents(reset) {
            if (reset) {
                this.queryUnbindUserForm.pageNum_ = 1
                this.queryUnbindUserForm.total = 0
            }
            this.queryUnbindUserForm.groupId = this.currentGroupId
            this.getUserInfoListNotInGroupId(this.queryUnbindUserForm)
        },
        getDateStr(d) {
            if (d != null && d != undefined && d != 0) {
                return new Date(d).toLocaleDateString()
            } else {
                return ''
            }
        },
        queryUsersUnderGroup(reset) {
            if (reset) {
                this.queryUserForm.pageNum_ = 1
                this.queryUserForm.total = 0
            }
            this.getUserInfoListByGroupId(this.queryUserForm)
        },
        handleUsersSelectChange(items) {
            this.pickedUsersUnderGroup = items
        },
        exportUsers() {
            let userList = this.pickedUsersUnderGroup.map(item => {
                return item.studentId
            })
            let params = {
                groupId: this.queryUserForm.groupId,
                userIds: userList.join(',')
            }
            let url = `/api/userservice/userGroup/exportGroupUser?groupId=${
                params.groupId
            }&userIds=${params.userIds}`
            window.open(url, '_self')
        },
        deleteUsersBatch(userIds) {
            this.deleteUsersRel(this.getPickedUsersUnderGroup())
        },
        deleteUsersRel(users) {
            let that = this
            let data = {
                groupId: this.queryUserForm.groupId,
                userList: users
            }
            if (!data.userList.length) {
                this.$message({
                    type: 'warning',
                    message: '请至少选择一条要删除的数据'
                })
                return
            }
            this.batchDelUserGroupRel(data)
        },
        deleteUser(_userId, _userType) {
            this.deleteUsersRel([{ userId: _userId, userType: _userType }])
        },
        getPickedUsersUnderGroup() {
            return this.pickedUsersUnderGroup.map((item, index) => {
                return { userId: item.studentId, userType: item.userType }
            })
        },
        closeShowDetail() {
            this.queryUserForm.userName = ''
        },
        showGroupDetail(groupId) {
            this.queryUserForm.groupId = groupId
            this.showDetailDialog = true
            this.queryUsersUnderGroup(true)
        },
        cancelCreate() {
            this.createForm.groupName = ''
            this.createForm.description = ''
        },
        addRolesForGroup(_userGroup) {
            this.$router.push({
                path: '/groupDetail',
                query: { userGroup: _userGroup }
            })
        },
        onSubmit() {
            this.getGroups(this.queryForm)
        },
        queryGroupList() {
            this.queryForm.pageNum_ = 1
            this.queryForm.total = 0
            this.onSubmit()
        },
        editGroup(userGroup) {
            this.showEditDialog = true
            Vue.set(this, 'editForm', {})
            if (!userGroup.innerRoleList) {
                userGroup.innerRoleList = []
            }
            if (!userGroup.projIdList) {
                userGroup.projIdList = []
            }
            this.editForm = Object.assign({}, userGroup)
        },
        bindRolesForGroup(group) {
            this.currentGroupId = group.groupId
            this.queryRoleForm.userGroupId = group.groupId
            this.showRolesDialog = true
            this.queryRoles(true)
        },
        showRolesUnderGroup(group) {
            this.queryBindRoleForm.groupId = group.groupId
            this.showBindRolesDialog = true
            this.queryRolesUnderGroup(true)
        },
        queryRolesUnderGroup(reset) {
            if (reset) {
                this.queryBindRoleForm.pageNum_ = 1
                this.queryBindRoleForm.total = 1
            }
            this.getRoleRelListByGroupId(this.queryBindRoleForm)
        },
        deleteRoleFromGroup(roleId) {
            let data = {
                roleList: [{ roleId: roleId }],
                groupId: this.queryBindRoleForm.groupId
            }
            this.batchDelRoleGroupRel(data)
        },
        queryRoles(reset) {
            if (reset) {
                this.queryRoleForm.pageNum_ = 1
                this.queryRoleForm.total = 0
            }
            this.getUnbindRoles(this.queryRoleForm)
        },
        handlePickRolesChange(roles) {
            this.pickRoles = roles
        },
        getRolesIds() {
            return this.pickRoles.map((item, index) => {
                return { roleId: item.roleId }
            })
        },
        addRolesToGroup() {
            if (this.pickRoles.length == 0) {
                this.$message({
                    type: 'warning',
                    message: '请选择要绑定的角色.'
                })
                return
            }
            let data = {
                groupId: this.currentGroupId,
                roleList: this.getRolesIds()
            }
            this.batchAddRoleGroupRel(data)
        },
        addUsersToGroup() {},
        showAddUsersToGroupDialog(groupId) {
            this.activeTab = 'student'
            this.currentGroupId = groupId
            this.showUnbindUsersDialog = true
        },
        createUserGroupCancel() {
            this.$refs.createForm.resetFields()
        },
        //新增用户组按钮事件
        createUserGroupFn() {
            this.$refs.createForm.validate(valid => {
                console.log(this.createForm)
                if (valid) {
                    this.createUserGroup(this.createForm)
                }
            })
        },
        editGroupWhenCancel() {
            this.showEditDialog = false;
            this.$refs.editUserGroupForm.resetFields()
        },
        editUserGroupFn() {
            this.$refs.editUserGroupForm.validate(valid => {
                if (valid) {
                    this.updateGroup(this.editForm)
                }
            })
        },
        deleteUserGroup(groupId) {
            let _that = this
            this.$confirm('确定要删除该记录吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.deleteGroup(`groupId=${groupId}`)
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    })
                })
        },
        resetUnbindStudents() {
            this.queryUnbindUserForm.trainingLevel = ''
            this.queryUnbindUserForm.grade = ''
            this.queryUnbindUserForm.faculty = ''
            this.queryUnbindUserForm.degreeType = ''
            this.queryUnbindUserForm.profession = ''
            this.queryUnbindUserForm.pageNum_ = 1
            this.queryUnbindUserForm.pageSize_ = 20
        },
        closeRoleBound() {
            this.queryBindRoleForm.roleName = ''
        },
        closeBindingRole() {
            this.queryRoleForm.roleName = ''
        },
        closeAddUser() {
            this.resetUnbindStudents()
            this.queryUnbindUserForm.name = ''
            this.queryUnbindTeacherForm.condition = ''
            this.queryUnbindLocalUserForm.condition = ''
            this.activeTab = ''
        },
        getInnerRoleList(roleList) {
            // let text = this.options.innerRoleList.find
            let roleLable = '';
            this.options.innerRoleList.map(item => {
                if(roleList.indexOf(item.value) > -1) {
                    roleLable += item.label + ','
                }
            })
            return roleLable.slice(0, roleLable.length-1);
        },
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        handleCommand(command) {
            switch (command) {
                case 'DT':
                    downLoadTemplate()
                    break
                case 'IM':
                    if(this.multipleSelection.length ==1){
                        this.extraUploadData.groupId = this.multipleSelection[0].groupId
                        this.$refs.importBtn.click()
                    }else{
                        this.$message({
                            type:'warning',
                            message:'仅支持选择一个用户组'
                        })
                    }
                    break
            }
        },
        downloadExcell(data) {
            //输出base64编码
            function base64(s) {
                return window.btoa(unescape(encodeURIComponent(s)))
            }
            //列标题
            let str =
                '<tr><td>工号</td><td>姓名</td><td>用户类型</td><td>错误信息</td></tr>'
            //循环遍历，每行加入tr标签，每个单元格加td标签
            for (let i = 0; i < data.length; i++) {
                str += '<tr>'
                str += `<td>${data[i]['userId'] + '\t'}</td><td>${data[i][
                    'userName'
                ] + '\t'}</td><td>${data[i]['userType'] + '\t'}</td><td>${data[i][
                    'errorMsg'
                ] + '\t'}</td>`
                str += '</tr>'
            }
            //Worksheet名
            let worksheet = 'Sheet1'
            let uri = 'data:application/vnd.ms-excel;base64,'

            //下载的表格模板数据
            let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
      xmlns:x="urn:schemas-microsoft-com:office:excel"
      xmlns="http://www.w3.org/TR/REC-html40">
      <head>
      <meta charset='UTF-8'>
      <!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
        <x:Name>${worksheet}</x:Name>
        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
        </head><body><table>${str}</table></body></html>`
            //下载模板
            window.location.href = uri + base64(template)
        },
        importSuccess(res) {
            let { code, data } = res
            if (code == 200) {
                if (data&& data.length > 0) {
                    const h = this.$createElement
                    this.$msgbox({
                        title: '提示',
                        message: h('div', null, [
                            h('span', null, ` 导入失败${data.length}条！`),
                            h(
                                'button',
                                {
                                    style: 'color: rgb(40 118 194);border:none;cursor: pointer;',
                                    on: {
                                        click: () => this.downloadExcell(data)
                                    }
                                },
                                '点击下载查看详情'
                            )
                        ]),
                        confirmButtonText: '确定'
                    })
                } else {
                    this.$message({
                        type: 'success',
                        message: '导入成功！'
                    })
                }
            } else {
                this.$eduAlert(res.msg)
            }
        },
        importError() {
            this.$message({
                type: 'warning',
                message: '导入失败，请稍后再试！'
            })
        }
    }
}
</script>
<style lang="scss" scoped>
span.toggle {
    cursor: pointer;
    display: inline-block;
    padding: 0 10px;
}
span.toggle.active {
    color: #66b1ff;
}
section.tree-box {
    width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    p {
        margin: 0;
        padding: 0;
        height: 36px;
        line-height: 36px;
        border-bottom: 1px solid #e5e5e5;
        padding-left: 12px;
        background: #f0f2f5;
    }
    div {
        width: 100%;
        height: 320px;
        overflow: auto;
    }
    .el-tree {
        padding: 5px;
    }
}
</style>
